<template>
  <div class="index-query">
    <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            v-loading="tableLoading"
            element-loading-text="加载中"
            style="width: 100%;">
      <el-table-column
        label="编号"
        type="index"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
              prop="usi_name"
              label="用户名"
              width="120px"
              align="center">
      </el-table-column>
      <el-table-column
              prop="usi_sex"
              label="性别"
              width="120px"
              align="center">
        <template scope="scope">
          <span v-if="scope.row.usi_sex == 0">女</span>
          <span v-if="scope.row.usi_sex == 1">男</span>
        </template>
      </el-table-column>
      <el-table-column
              prop="usi_ages"
              label="年龄"
              width="120px"
              align="center">
      </el-table-column>
      <el-table-column
              prop="usi_phone"
              label="电话"
              width="150px"
              align="center">
      </el-table-column>
      <el-table-column
              prop="usi_address"
              label="地址"
              show-overflow-tooltip
              width="250px"
              align="center">
      </el-table-column>
      <el-table-column
              label="操作"
              align="center">
        <template scope="scope">
          <el-button
                  size="small"
                  type="danger"
                  icon="delete"
                  @click="deleteUser(scope.row.usi_id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'index-query',
    data () {
      return {
        tableData: [],
        multipleSelection: [],
        tableLoading:true
      }
    },
    methods:{
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteUser(uid){
        this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method:'get',
            url:'/index/index/ajaxDeleteUser',
            params:{'uid':uid}
          }).then((data)=>{
            this.tableLoading = false
            if(data.body.error == 0){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getData();
            }else{
              this.$message.error('删除失败');
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getData(){
        this.$http({
          method:'post',
          url:'/index/index/ajaxGetAllUserInfo',
          param:{}
        }).then((data)=>{
          this.tableData = data.body.user;
          this.tableLoading = false
        })
      }
    },
    mounted(){
      this.getData();
    }
      
  }
</script>

<style scoped>
</style>
